<template>
	<view>
		<scroll-view scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
	<view class="majordomo">
		<view class="basic">
			<view class="basic_box pt20">
				<view class="hello mb5">管家格言</view>
				<view class="">
					<view class="desc">{{majordomoData.housekeeperDesc}}</view>
				</view>
			</view>
		</view>
		<view class="top">
			<view class="top_box">
				<view class="d-flex h100p">
					<view class="mr15">
						<u--image :showLoading="true" :src="majordomoData.housekeeperUrl" width="170rpx" height="220rpx"
							></u--image>
					</view>
					<view class="d-flex flex-column j-sb">
						<view class="d-flex a-center">
							<!-- <view class="name_key">名称：</view> -->
							<view class="name_value">{{majordomoData.housekeeperName}}</view>
						</view>
						<view class="d-flex config">
							<view>性别：</view>
							<view>{{majordomoData.housekeeperSex==0?'女':'男'}}</view>
						</view>
						<view class="d-flex config">
							<view>身高：</view>
							<view>{{majordomoData.housekeeperHeight}}</view>
						</view>
						<view class="d-flex config">
							<view>体重：</view>
							<view>{{majordomoData.housekeeperWeight}}</view>
						</view>
						<view class="d-flex config">
							<view>手机号：</view>
							<view>{{majordomoData.housekeeperPhone}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="center_box">
				<!-- <view style="height: 800rpx;width: 700rpx;background-color: aqua;"></view> -->
				<u--image :showLoading="true" :src="majordomoData.housekeeperUrl" width="700rpx" height="880rpx"
					></u--image>
			</view>
		</view>
		
		<u-toast ref="uToast" duration="1000"></u-toast>
		<!-- <tab-bar-view :tabCode="'2'"></tab-bar-view> -->
	</view>
	</scroll-view>
	</view>
</template>

<script>
	import {
		queryCustomerHousekeeperByApp
	} from '@/api/index'
	export default {
		onLoad() {

		},
		onShow() {
			this.queryCustomerHousekeeperByApp()
		},
		onReady() {
			// 隐藏导航栏
			// uni.hideTabBar({});
		},
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				majordomoData: {}
			}
		},
		methods: {
			queryCustomerHousekeeperByApp() {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				queryCustomerHousekeeperByApp({
					customerCode: this.userInfo.customerCode
				}).then(res => {
					if (res.object) {
						that.majordomoData = res.object
					} else {
						that.$refs.uToast.show({
							type: "error",
							message: res.message,
							complete() {
								uni.navigateBack({
									delta: parseInt(that.delta)
								})
							}
						})
					}

					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}
	
	.majordomo {
		height: 100vh;
		background-color: #f5f5f5;
		font-family: Source Han Sans CN, Source Han Sans CN-500;
	}

	.basic {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #77C7A2;
		height: 300rpx;
		box-sizing: border-box;


		.basic_box {
			width: 700rpx;
			height: 250rpx;

			.hello {
				font-size: 28rpx;
				color: #D9FFF1;
				font-weight: 500;
			}

			.desc {
				font-size: 30rpx;
				color: #fff;
				line-height: 50rpx;
			}
		}
	}

	.top {
		margin-top: -80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.top_box {
			width: 700rpx;
			height: 270rpx;
			padding: 26rpx 26rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			background: linear-gradient(180deg, #53b789, #8cdfb7 100%);

			.name_key {
				font-size: 28rpx;
				font-weight: 400;
				color: #454545;
			}

			.name_value {
				font-size: 30rpx;
				font-weight: 600;
				color: #fff;
			}

			.config {
				font-size: 24rpx;
				font-weight: 400;
				color: #fff;
			}

			.sex {
				font-size: 50rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.center {
		display: flex;
		flex-direction: column;
		align-items: center;

		.center_box {
			width: 700rpx;
			margin-top: 38rpx;
		}
	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;

		.bottom-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 700rpx;
			height: 88rpx;
			padding: 26rpx 26rpx;
			margin-top: 38rpx;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);

			.content {
				display: flex;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>